<script setup>
import { onMounted, ref, watch } from "vue";
import TableList from "@/components/TableList/index.vue";
import PaginationBox from "@/components/PaginationBox/index.vue";
import AddForm from "./components/AddForm.vue";
import { ElMessage } from "element-plus";
import {
  useAllCommunityList,
  useGenderList,
  useMemberList,
  useBuildingList,
} from "@/hooks/index.js";

import { getMemberListApi, delMemberApi } from "@/api/member";

// 搜索表单
const communityList = useAllCommunityList();
const genderList = useGenderList();
const memberList = useMemberList();
const buildingList = ref([]);

// 处理时间
const timeArr = ref([]);
watch(timeArr, (val) => {
  console.log(timeArr.value);
  if (timeArr.value) {
    queryData.value.create_time = val
      .map((item) => {
        item = +new Date(item);
        return item;
      })
      .join(",");
    console.log(queryData.value.create_time);
  } else {
    queryData.value.create_time = "";
  }
});

const defaultData = () => ({
  name: "",
  pageSize: 10,
  current: 1,
  building_code: null,
  create_time: "",
  community_code: "",
  tel: "",
  gender: "",
  identity_id: "",
  owner_type: "",
});

const queryData = ref(defaultData());
const total = ref(0);
// 搜索
const onSearch = () => {
  queryData.value.current = 1;
  initData();
};

const onReset = () => {
  queryData.value = defaultData();
  timeArr.value = [];
  initData();
};

// 对应楼栋列表
const changeCommunity = async (value) => {
  if (value) {
    buildingList.value = await useBuildingList(value);
  } else {
    buildingList.value = [];
    queryData.value.building_code = null;
  }
  console.log(buildingList.value);
};

// =================== 表格部分 =======================
const list = ref([]);
const initData = async () => {
  const { data } = await getMemberListApi(queryData.value);
  console.log(data);
  list.value = data.rows;
  total.value = data.count;
};

const columns = [
  {
    label: "小区名称",
    prop: "community",
    type: "position",
  },
  {
    label: "栋数",
    prop: "building",
    type: "position",
  },
  {
    label: "房产名称",
    prop: "house",
    type: "position",
  },
  {
    label: "成员姓名",
    prop: "name",
  },
  {
    label: "照片",
    prop: "photo",
    type: "picture",
  },
  {
    label: "身份证号",
    prop: "identity_id",
  },
  {
    label: "联系方式",
    prop: "tel",
  },
  {
    label: "生日",
    prop: "birth",
    type: "time",
    width: "50",
  },
  {
    label: "性别",
    prop: "gender",
  },
  {
    label: "成员类型",
    prop: "owner_type",
  },
  {
    label: "创建时间",
    prop: "create_time",
    type: "time",
  },
  {
    label: "备注",
    prop: "remark",
  },
  {
    label: "操作",
    type: "action",
    width: "100",
  },
];

// 处理性别和成员
const showState = (val, type) => {
  let res;
  if (type === "gender") {
    res = useGenderList().find((item) => item.value === val * 1);
  } else if (type === "owner_type") {
    res = useMemberList().find((item) => item.value === val * 1);
  }
  return res ? res.label : "-";
};

onMounted(() => {
  initData();
});

// ==================== 添加修改 ========================
const addRef = ref();

// 删除
const delRow = async (id) => {
  console.log(id);
  await delMemberApi(id);
  ElMessage.success("删除成功");
  if (queryData.value.pageNum > 1 && list.value.length <= 1)
    queryData.value.current--;
  initData();
};

defineExpose({
  list,
  columns,
  communityList,
});
</script>
<template>
  <div class="app-container">
    <h1>人员管理</h1>
    <!-- 表单区域 -->
    <el-card>
      <el-form label-position="top" inline>
        <el-form-item label="小区名称">
          <!-- 下拉框 -->
          <el-select
            v-model="queryData.community_code"
            placeholder="请选择"
            clearable
            @clear="initData"
            @change="changeCommunity"
          >
            <el-option
              v-for="item in communityList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="栋数">
          <!-- 下拉框 -->
          <el-select
            v-model="queryData.building_code"
            placeholder="请选择"
            clearable
            @clear="initData"
          >
            <el-option
              v-for="item in buildingList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成员姓名">
          <el-input
            v-model="queryData.name"
            placeholder="请输入"
            clearable
            @clear="initData"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input
            v-model="queryData.identity_id"
            placeholder="请输入"
            clearable
            @clear="initData"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <!-- 下拉框 -->
          <el-input
            v-model="queryData.tel"
            placeholder="请输入"
            clearable
            @clear="initData"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <!-- 下拉框 -->
          <el-select
            v-model="queryData.gender"
            placeholder="请选择"
            clearable
            @clear="initData"
          >
            <el-option
              v-for="item in genderList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成员类型">
          <!-- 下拉框 -->
          <el-select
            v-model="queryData.owner_type"
            placeholder="请选择"
            clearable
            @clear="initData"
          >
            <el-option
              v-for="item in memberList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <!-- 下拉框 -->
          <el-date-picker
            v-model="timeArr"
            type="datetimerange"
            start-placeholder="请选择"
            end-placeholder="请选择"
            clearable
            @clear="initData"
          />
        </el-form-item>
      </el-form>
      <el-row justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
          <el-button type="text" icon="ArrowUp">收起</el-button>
        </div>
      </el-row>
    </el-card>
    <br />
    <el-card>
      <!-- 工具栏 -->
      <el-row justify="end">
        <div></div>
        <div>
          <el-button type="primary" @click="addRef.isShow = true"
            >新增成员</el-button
          >
        </div>
      </el-row>
      <br />
      <!-- 表格区域 -->
      <TableList
        :columns="columns"
        :list="list"
        @handleDel="delRow($event)"
        @handleEdit="addRef.replayData($event)"
      >
        <template #otherType="{ row, data }">
          <template v-if="data === 'gender'">
            {{ showState(row[data], "gender") }}
          </template>
          <template v-if="data === 'owner_type'">
            {{ showState(row[data], "owner_type") }}
          </template>
        </template>
      </TableList>
      <br />
      <!-- 分页区域 -->
      <PaginationBox
        :queryData="queryData"
        :total="total"
        @changePageNum="initData"
        @changePageSize="initData"
      ></PaginationBox>
    </el-card>
    <!-- 新增抽屉 -->
    <AddForm
      ref="addRef"
      :communityList="communityList"
      @updateList="initData"
    ></AddForm>
  </div>
</template>

<style scoped></style>
